import React, { Component } from 'react';
import Styles from './Select.scss';
export default class Select extends Component {
    constructor(props) {
        super(props);
        this.state = {
            optionsList: props.options,
            selectValue: {
                text: '',
                value: ''
            },
            selectFocus: false
        }
    }
    componentDidMount() {
        window.addEventListener('click', this.addEventListenerSelectBlur);
        let { value } = this.props;
        this.getSelectDefaultData(value);
    }
    componentWillReceiveProps(nextProps) {
        let { options, value } = nextProps;
        this.getSelectDefaultData(value)
        this.setState({
            optionsList: options
        });
    }
    addEventListenerSelectBlur = (ev) => {
        let oEvent = ev || event;
        let oFrom = oEvent.target || oEvent.relatedTarget;
        // 其中oEvent.fromElement兼容IE，chrome
        // oEvent.relatedTarget;兼容FF。
        if (this.selectContent) {
            if (this.selectContent.contains(oFrom)) return; // 判断div是不是包含oFrom,如果包含就返回
            this.setState({
                selectFocus: false
            });
        }
    }
    selectFocus = () => {
        this.setState({
            selectFocus: true
        });
    };
    inputChange = (e) => {
        let { value } = e.target;
        let { options } = this.props;
        let filterOptions = this.filterOptions(value);
        this.setState({
            selectValue: {
                text: value,
                value: null
            },
            optionsList: filterOptions
        })
    }
    filterOptions=(value) => {
        let { options } = this.props;
        let returnOptions = [];
        if (value) {
            options.filter((values) => {
                if (values.text.indexOf(value) >= 0) {
                    returnOptions.push(values);
                }
            })
        } else {
            returnOptions = options;
        }
        return returnOptions;
    }
    getSelectDefaultData=(value) => {
        let { options } = this.props;
        options.map((item, index) => {
            item.checked = false;
            if (item.value === value) {
                item.checked = true;
            }
        })
        return options;
    };
    handleOption= (opt) => {
        this.setState({
            selectValue: opt,
            selectFocus: false
        }, () => {
            this.props.selectchange(opt);
        });
    }
    render() {
        const { placeHolder, value } = this.props;
        const { selectValue, selectFocus, optionsList } = this.state;
        return (
            <div 
                className={Styles.yutaoSelectContent}
                ref={c => this.selectContent = c}
            >
                <input 
                    type="text"
                    placeholder={placeHolder}
                    value={selectValue.text}
                    className={Styles.yutaoSelect}
                    onFocus={this.selectFocus}
                    onBlur={this.selectBlur}
                    onChange={this.inputChange}
                />
                <ul className={`${Styles.yutaoOption} ${selectFocus ? Styles.yutaoSelectFocus : ''}` }>
                    {(optionsList || []).map((opt, index) => {
                        return (
                            <li 
                                value={opt.value}
                                key={index}
                                onClick={() => this.handleOption(opt)}
                                className={opt.checked ? Styles.active : ''}  
                            >
                                {opt.text}
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}
